<template>
    <div class="tu">
        <el-carousel :interval="4000" type="card" class="custom-carousel">
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index" :style="getCarouselItemStyle(index)">
                <h3 text="2xl" justify="center">{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                carouselItems: [1, 2, 3, 4, 5, 6], // 用于轮播的数据项
                itemStyles: [ // 每个轮播项的自定义宽度和高度
                    { width: '220px', height: '200px' },
                    { width: '300px', height: '200px' },
                    { width: '210px', height: '200px' },
                    { width: '210px', height: '200px' },
                    { width: '210px', height: '200px' },
                    { width: '300px', height: '200px' },
                ],
            };
        },
        methods: {
            getCarouselItemStyle(index) {
                console.log(index)
                return this.itemStyles[index];
            },
        },

    };
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }

    .custom-carousel {
        padding: 0; /* 移除轮播组件的默认内边距 */
        margin: 0; /* 移除轮播组件的默认外边距 */
    }

    .tu {
        width: 650px; /* 所有轮播项宽度之和 */
        margin: 0 auto; /* 居中对齐容器 */
    }
</style>
